<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <section class="user_balance_box">
      <div class="user_balance ">
      	<div class="user_balabce_hea bg_li">
      		<p class="user_balance_top">账户余额（元）</p>
        	<p class="user_balance_con">6800.00</p>
      	</div>
        <div class="user_balance_pake dipW">
        	<div class="user_balance_one">
        		<ul>
        			<li>
        				<div>
        					<p class="user_month_feo">888.00</p>
        					<p class="user_month_fee">本月收益</p>
        				</div>
        				
        			</li>
        			<li>
        				<div>
        					<p class="user_month_feo">888.00</p>
        					<p class="user_month_fee">累计收益</p>
        				</div>
        				
        			</li>
        		</ul>
        		<div class="user_blance_hr">
        			
        		</div>
        	</div>
        	<div class="user_balance_two">
        		<ul>
        			<li>
        				<div>
        					<p class="user_month_feo">888.00</p>
        					<p class="user_month_fee">可提金额</p>
        				</div>
        				
        			</li>
        			<li>
        				<div>
        					<p class="user_month_feo">888.00</p>
        					<p class="user_month_fee">不可提现</p>
        				</div>
        				
        			</li>
        			
        		</ul>
        		
        	</div>
        </div>
        <!--<div class="user_balance_con dip ju_al_lf" v-if="balanceUser.balance != null || balanceUser.balance != undefined">{{balanceUser.balance}}</div>
        <div class="user_balance_con dip ju_al_lf" v-else>68000.00</div>-->
        <!--<div class="user_balance_bom dip ju_al_bom">
          <span v-if="userbalanceS.availableAmount != null || userbalanceS.availableAmount != undefined">可提现余额：{{userbalanceS.availableAmount}}（元）</span>
          <span v-else>可提现余额：---（元）</span>
          <span v-if="userbalanceS.nonPresentAmount != null || userbalanceS.nonPresentAmount != undefined">不可提现余额：{{userbalanceS.nonPresentAmount}}（元）</span>
          <span v-else>不可提现余额：---（元）</span>
        </div>-->
      </div>
      <ul class="user_con_listbom dipW clearfix" style="margin-top: .8rem;">
        <li class="user_con_bomitems dip ju_al" v-for="(ulites,index) in balaonceS" :key="index" @click="geturlhraf(ulites.url,index)">
          <span class="user_con_bomitemsImg dip ju_al_lf">
            <img :src="'./static/images/fee/'+ulites.img+''" alt="">
          </span>
          <span class="user_con_bomitemstext dip ju_al_bet">
            <i class="user_con_font">{{ulites.text}}</i>
            <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
          </span>
        </li>
      </ul>
      
    </section>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'余额',
      },
      balaonceS:[
        {
          img:'chongzhi.png',
          text:'充值',
          url:'/bomNav/userRecharge/',
        }
        , {
          img:'tixianicon.png',
          text:'提现',
          url:'/bomNav/userRecharge/',
        }
        , {
          img:'shouyiicon.png',
          text:'收益',
          url:'/bomNav/userIncome/',
        }
      ],
      balanceUser:'', // 这是总金额
      userbalanceS:'', // 这是可用余额
    }
  }
  ,methods:{
    geturlhraf(ulites,ind){
      
      var d = ind +1
      if(ind == 2){
      	this.$router.push({
        path:ulites
      })
      	return
      }
      
      this.$router.push({
        path:ulites+d
      })
      // console.log(22)
    },
    getblan(){
    // if(this.$store.getters.showuserifon){
        this.axios.post(this.$busPoat.userInfo(),{}).then(response=>{
          // this.userifon = response.data.user
          this.balanceUser = response.data
          console.log(response.data)
          this.userbalanceS =response.data.user
          sessionStorage.setItem('balance',JSON.stringify(response.data))
          // console.log(this.userifon)
          // console.log(JSON.parse(sessionStorage.getItem('balance')))      
        }).catch(error=>{
          alert('获取用户信息失败')
          console.log(error)
        })
      //   this.$store.dispatch('hideuserifonS')
      // }else{
      //   console.log(564)
      // }
    }

  }
  ,components:{Nav} //引入组件
  ,created(){
    this.getblan()
    // this.balanceUser = JSON.parse(sessionStorage.getItem('balance'))
    // this.userbalanceS = this.balanceUser.user
  }
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: fixed;
}
.user_balance_box{
  margin-top:.8rem;
  width: 100%;
  height: 100%;
  .user_balabce_hea{
  	width: 100%;
  	height: 3rem;
    padding-top: 0.2rem;
  }
  .user_balance_pake{
  	width: 85%;
  	height: 2rem;
  	background: #FFFFFF;
  	position: absolute;
  	top: 86%;
  	left: 50%;
  	transform: translate(-50%,-50%);
  	border: .02rem solid #EEEEEE;
  	border-radius: .12rem;
  	.user_balance_one{
  		position: relative;
  		width: 50%;
  		ul{
  			text-decoration: none;
  			width: 100%;
  			height: 100%;
  			li{
  				text-align: center;
  				color: #000000;
  				height: 50%;
  				position: relative;
  				div{
  					width: 100%;
  					height: 50%;
  					position: absolute;
  					top: 50%;
  					left: 50%;
  					transform: translate(-50%,-50%);
  					.user_month_feo{
  						font-size: .26rem;
  					}
  					.user_month_fee{
  						font-size: .2rem;
  						color: #949ca6;
  						padding-top: .1rem;
  					}
  				}
  			}
  		}
  		.user_blance_hr{
  			width: .01rem;
  			height: 80%;
  			background: #999;
  			position: absolute;
  			top: 50%;
  			left: 100%;
  			transform: translate(-50%,-50%);
  		}
  	}
  	.user_balance_two{
  		width: 50%;
  		ul{
  			text-decoration: none;
  			width: 100%;
  			height: 100%;
  			li{
  				text-align: center;
  				color: #000000;
  				height: 50%;
  				position: relative;
  				div{
  					width: 100%;
  					height: 50%;
  					position: absolute;
  					top: 50%;
  					left: 50%;
  					transform: translate(-50%,-50%);
  					.user_month_feo{
  						font-size: .26rem;
  					}
  					.user_month_fee{
  						font-size: .2rem;
  						color: #949ca6;
  						padding-top: .1rem;
  					}
  				}
  				
  			}
  		}
  	}
  }
  .user_balance{
    width: 100%;
    height: 3.6rem;
    position: relative;
    /*padding:.35rem .4rem;*/
    color:#FFEFE1;    
    font-family: 'MicrosoftYaHei';
    font-weight: normal;    
    text-align: left;    
    .user_balance_top{
      height: 0.88rem;
      width: 100%;
      line-height: .88rem;
      font-size: .26rem;
      text-align: center;
    }
    .user_balance_con{
      // padding-top:.26rem;
      width: 100%;
      height: 1rem;
      text-align: center;
      font-family: 'arial' ;
      line-height: .5rem;
      font-weight: 500;   
      font-size: .72rem;
      .user_balance_number{
        font-size: .36rem;
        margin-right:.3rem;
      }
    }
    .user_balance_bom{
      border-top:.02rem solid #FFBB87;
      width: 100%;
      height: 0.6rem;
      font-weight: 500;
      font-size: .2rem;
    }
  }
}
.user_con_ifonBoxjiantou{
  width: 0.15rem;
  height: 0.3rem;
  margin-right: .2rem;
}
.user_con_listbom{
  width: 100%;
 
  .user_con_bomitems{
    width: 100%;
    height: 1rem;
     background: #fff;  
    border-bottom:.02rem solid #f2f2f2;
    padding:0rem .4rem;    
    .user_con_bomitemsImg{
      width: 1rem;
      max-width:17.914%;
      height: 1rem;
      img{
        width: .5rem;
        height: .5rem;
      }
    }
    .user_con_bomitemstext{
       width:82%;
       height: 100%;
      .user_con_font{
        font-size: .28rem;
        color:#666;
        font-weight: bold;
      }
    }
  }
  .user_con_bomitems:nth-child(3){
  	margin-top: .1rem;
  }
  .clear_bg{  
       background-image: url("../../../static/images/task/bg_seleace.png");
      background-position-x: 92%;
      background-position-y: center;
      -moz-background-size: 4%;
           background-size: 4%;
      background-repeat: no-repeat;
    }
}
</style>
